<template>
  <div style="padding: 20px">
    <el-card>
      <div slot="header">参会个人</div>
      <div>
        <el-row :gutter="10" style="margin-top: 20px">
          <el-col :span="3">
            <el-select
              clearable
              v-model="selAttendPersonalListQuery.audit"
              placeholder="不限参会状态"
              @change="handleAuditChange"
            >
              <el-option
                v-for="item in limitStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select
              clearable
              v-model="selAttendPersonalListQuery.source"
              placeholder="不限来源"
              @change="handleSelectAuditChange"
            >
              <el-option
                v-for="item in sourceList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-select
              clearable
              v-model="selAttendPersonalListQuery.orderKey"
              placeholder="按参会状态排序"
              @change="handleSortChange"
            >
              <el-option
                v-for="item in sortList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-row :gutter="10" type="flex">
              <el-select
                clearable
                v-model="selAttendPersonalListQuery.keyType"
                placeholder="姓名"
                style="width: 40%"
                @change="handleKeyTypeChange"
              >
                <el-option
                  v-for="item in companyType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-row :gutter="10" type="flex">
                <el-input
                  v-model="selAttendPersonalListQuery.keyword"
                  @keyup.enter.native="handleSearch"
                  placeholder="请输入搜索内容"
                ></el-input>
                <el-button type="primary" @click="handleSearch">
                  <i class="el-icon-search"></i>
                </el-button>
              </el-row>
            </el-row>
          </el-col>
        </el-row>
        <el-table
          v-loading="loading"
          :data="selAttendPersonalLists"
          style="width: 100%; margin-top: 20px"
          @selection-change="handleSelectionChange"
          ref="table"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="companyname" label="姓名" width="200">
            <template slot-scope="scope">
              <div style="display: flex; margin-left: -8px">
                <el-avatar
                  style="width: 40px; height: 40px; display: inline-block"
                >
                  <img
                    :src="scope.row.photoUrl"
                    alt=""
                    style="width: 100%; height: 100%"
                  />
                </el-avatar>
                <div style="margin-left: 10px">
                  <el-link type="primary">{{ scope.row.fullname }}</el-link>
                  <div>
                    {{ scope.row.ageCn }}·{{ scope.row.sexCn }}·{{
                      scope.row.educationCn
                    }}·{{ scope.row.experienceCn }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="setmeal_cn"
            label="简历完整度"
            width="170"
            align="center"
          >
            <template slot-scope="scope">
              <el-progress :percentage="scope.row.complete"></el-progress>
            </template>
          </el-table-column>
          <el-table-column
            prop="isDisplay"
            label="参会状态"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.isDisplay ? 'success' : 'danger'">{{
                scope.row.isDisplay ? "已通过" : "未通过"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="prop"
            label="刷新/添加时间"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                <i class="el-icon-time"></i>
                {{ scope.row.refreshtime | dateFormat }}
              </div>
              <div>
                <i class="el-icon-time"></i>
                {{ scope.row.addtime | dateFormat }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="audit"
            label="简历状态"
            width="170"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag :type="getAuditTagType(scope.row.audit)">
                {{ getAuditStatus(scope.row.audit) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="prop"
            label="数据来源"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.source ? "后台添加" : "自主申请" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="prop"
            label="操作"
            width="width"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="warning"
                size="small"
                @click="editClick(scope.row)"
                >审核</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="delBtn(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row :gutter="10" style="margin-top: 20px">
          <el-col :span="12">
            <el-button type="primary" size="small" @click="addenterprise"
              >添加个人</el-button
            >
            <!-- <el-button
              type="primary"
              size="small"
              @click="chStatusDialog = true"
              >参会状态</el-button
            > -->
            <!-- <el-button type="primary" size="small"
              >微信直面设置为客服</el-button
            > -->
            <!-- <el-button
              type="primary"
              size="small"
              @click="addBatchDialog = true"
              >批量添加</el-button
            > -->
            <!-- <el-button
              type="primary"
              size="small"
              @click="batchTopDialog = true"
              >批量置顶</el-button
            > -->
            <el-button type="danger" size="small" @click="batchDel"
              >批量删除</el-button
            >
            <el-button type="warning" size="small" @click="examinePlClick"
              >批量审核</el-button
            >
          </el-col>
          <el-col :span="12">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              style="text-align: right"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!-- 修改 -->
    <el-dialog
      title="设置参会状态"
      :visible.sync="editDialog"
      width="25%"
      @close="editClose"
    >
      <el-form ref="form" label-width="80px">
        <el-form-item label="简历状态">
          <el-radio-group v-model="audit">
            <el-radio :label="0">待审核</el-radio>
            <el-radio :label="1">已通过</el-radio>
            <el-radio :label="2">未通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row :gutter="10" type="flex" justify="end">
          <el-button @click="editClose">取消</el-button>
          <el-button type="primary" @click="btnOk">确定</el-button>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 直面 -->
    <el-dialog
      title="设置微信直面二维码"
      :visible.sync="faceDialog"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="参会企业"
          >宁波慧帮惠选智能科技有限公司</el-form-item
        >
        <el-form-item label="二维码方式">
          <el-radio v-model="radio" label="label">自主上传</el-radio>
          <el-radio v-model="radio" label="label">当场客服</el-radio>
        </el-form-item>
        <el-form-item label="">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注">
          <el-input placeholder="" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-row
            :gutter="10"
            type="flex"
            justify="end"
            style="margin-top: 20px"
          >
            <el-button @click="faceDialog = false">取消</el-button>
            <el-button type="primary">确认</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 置顶 -->
    <el-dialog title="设置参会企业置顶" :visible.sync="topupDialog" width="25%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="认证状态">
          <el-radio v-model="radio" label="label">置顶</el-radio>
          <el-radio v-model="radio" label="label">取消置顶</el-radio>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="topupDialog = false">取 消</el-button>
        <el-button type="primary">确定</el-button>
      </template>
    </el-dialog>
    <!-- 批量置顶 -->
    <el-dialog
      title="设置参会企业置顶"
      :visible.sync="batchTopDialog"
      width="25%"
    >
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="认证状态">
            <el-radio v-model="radio" label="label">置顶</el-radio>
            <el-radio v-model="radio" label="label">取消置顶</el-radio>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="batchTopDialog = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 批量添加 -->
    <el-dialog title="批量添加企业" :visible.sync="addBatchDialog" width="25%">
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="刷新时间">
            <el-select v-model="model" placeholder="不限">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业认证">
            <el-select v-model="model" placeholder="不限">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="套餐类型">
            <el-select v-model="model" placeholder="不限">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="addBatchDialog = false">取 消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </el-dialog>
    <!-- 参会状态 -->
    <!-- <el-dialog title="设置参会状态" :visible.sync="chStatusDialog" width="25%">
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-radio-group v-model="audit">
            <el-radio :label="0">待审核</el-radio>
            <el-radio :label="1">已通过</el-radio>
            <el-radio :label="2">未通过</el-radio>
          </el-radio-group>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="chStatusDialog = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-dialog> -->
    <!-- Add batch audit dialog -->
    <el-dialog
      title="将所选个人设置为"
      :visible.sync="examineDialog"
      width="30%"
    >
      <el-form ref="form" label-width="80px">
        <el-form-item label="认证状态:">
          <el-radio-group
            v-if="selectedRows.length > 0"
            v-model="selectedRows[0].audit"
          >
            <el-radio :label="0">待审核</el-radio>
            <el-radio :label="1">已通过</el-radio>
            <el-radio :label="2">未通过</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="examineDialog = false">取 消</el-button>
        <el-button type="primary" @click="auditClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  selAttendPersonalListApi,
  updatePersonalApi,
  delPersonalApi,
} from "@/api/application";
export default {
  data() {
    return {
      editDialog: false,
      faceDialog: false,
      topupDialog: false,
      batchTopDialog: false,
      addBatchDialog: false,
      chStatusDialog: false,
      loading: true,
      selAttendPersonalListQuery: {
        page: 1,
        pagesize: 10,
        jobfairId: null,
        audit: null,
        keyType: null,
        keyword: null,
        orderKey: null,
        source: null,
      },
      selAttendPersonalLists: [],
      total: "",
      // 修改参会个人
      ids: [],
      // 限定状态
      limitStatusList: [
        { value: "", label: "不限预定状态" },
        { value: 0, label: "待审核" },
        { value: 1, label: "已通过" },
        { value: 2, label: "未通过" },
      ],
      // 不限制添加时间
      addTimeList: [
        { value: "", label: "不限添加时间" },
        { value: 3, label: "三天内" },
        { value: 7, label: "一周内" },
        { value: 30, label: "一月内" },
        { value: 180, label: "半年内" },
        { value: 360, label: "一年内" },
      ],
      // 不限制来源
      sourceList: [
        { value: "", label: "不限来源" },
        { value: 1, label: "后台添加" },
        { value: 2, label: "自主申请" },
      ],
      // 排序
      sortList: [
        { value: "", label: "按参会状态排序" },
        { value: 1, label: "按添加时间排序" },
        { value: 2, label: "按刷新时间排序" },
      ],
      // 类型
      companyType: [
        { value: 1, label: "姓名" },
        { value: 2, label: "电话" },
      ],
      audit: "",
      examineDialog: false,
      selectedRows: [],
    };
  },
  created() {
    // console.log(this.$route.params.id);
    const savedQuery = localStorage.getItem("selCompanyGrListQuery");
    if (savedQuery) {
      this.selAttendPersonalListQuery.jobfairId = JSON.parse(savedQuery);
    }
    // this.selAttendPersonalListQuery.jobfairId = this.$route.params.id;
    this.selAttendPersonalList();
  },
  methods: {
    // 不限参会状态
    handleAuditChange(val) {
      console.log(val);
      this.selAttendPersonalList();
    },
    // 不限来源
    handleSelectAuditChange(val) {
      console.log(val);
      this.selAttendPersonalList();
    },
    // 按参会顺序排序
    handleSortChange(val) {
      console.log(val);
      this.selAttendPersonalList();
    },
    // 类型
    handleKeyTypeChange(val) {
      console.log(val);
      this.selAttendPersonalList();
    },
    handleSearch() {
      this.selAttendPersonalList();
    },
    // 列表查询
    async selAttendPersonalList() {
      try {
        const res = await selAttendPersonalListApi(
          this.selAttendPersonalListQuery
        );
        this.selAttendPersonalLists = res.records;
        this.total = res.total;
      } catch {
      } finally {
        this.loading = false;
      }
    },
    // 删除
    delBtn(id) {
      this.$confirm("此操作将永久删除该参会个人, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log(id);
          this.ids.push(id);
          const res = await delPersonalApi(this.ids);
          console.log(res);
          if (res.code === 1) {
            this.$message.success("删除成功");
            this.ids = [];
            this.selAttendPersonalList();
          } else {
            this.$message.success("删除失败");
          }
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除!",
          // });
        });
    },
    // 批量删除
    batchDel() {
      if (this.ids.length === 0) {
        this.$message.warning("请选择要删除的参会个人");
        return;
      }
      this.$confirm("此操作将永久删除该个人, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await delPersonalApi(this.ids);
          console.log(res);
          if (res.code === 1) {
            this.$message.success("删除成功");
            this.ids = [];
            this.selAttendPersonalList();
          }
        })
        .catch(() => {});
    },
    // 修改
    editClick(row) {
      console.log(row);
      this.editDialog = true;
      this.ids.push(row.id);
      this.audit = row.audit;
    },
    // 点击取消
    editClose() {
      this.editDialog = false;
      this.ids = [];
    },
    // 添加企业
    addenterprise() {
      localStorage.setItem(
        "selCompanyGrListQuery",
        this.selAttendPersonalListQuery.jobfairId
      );
      this.$router.push({
        name: "addenterprise",
      });
    },
    handleSelectionChange(selection) {
      try {
        this.selectedRows = selection.map((item) => ({
          id: item.id,
          audit: item.audit || 0,
          reason: item.reason || "",
        }));
        this.ids = this.selectedRows.map((item) => item.id);
      } catch (error) {
        console.error("选择状态更新失败:", error);
      }
    },
    // 当前页
    handleCurrentChange(page) {
      console.log(page);
      this.selAttendPersonalListQuery.page = page;
      this.selAttendPersonalList();
    },
    async btnOk() {
      try {
        console.log(this.ids);
        const res = await updatePersonalApi(this.ids, this.audit);
        console.log(res);
        if (res.code === 1) {
          this.$message.success("修改成功");
          this.selAttendPersonalList();
        } else {
          this.$message.error("修改失败");
        }
      } catch {
        this.$message.error("修改失败");
      } finally {
        this.editDialog = false;
      }
    },
    // 获取审核状态标签类型
    getAuditTagType(audit) {
      switch (audit) {
        case 0:
          return "warning";
        case 1:
          return "success";
        case 2:
          return "danger";
        default:
          return "warning";
      }
    },
    // 获取审核状态文本
    getAuditStatus(audit) {
      switch (audit) {
        case 0:
          return "待审核";
        case 1:
          return "已通过";
        case 2:
          return "未通过";
        // default:
        //   return "待审核";
      }
    },
    // Add batch audit button handler
    examinePlClick() {
      if (this.selectedRows.length === 0) {
        this.$message.warning("请先选择要审核的个人");
        return;
      }
      this.examineDialog = true;
    },
    // Add batch audit confirmation handler
    async auditClick() {
      try {
        const { audit } = this.selectedRows[0];

        const res = await updatePersonalApi(
          this.selectedRows.map((row) => row.id),
          audit
        );

        if (res.code === 1) {
          this.$message.success("设置成功!");
          this.examineDialog = false;
          this.selAttendPersonalList();
        } else {
          this.$message.error("设置失败");
        }
      } catch (error) {
        this.$message.error("设置失败");
      }
    },
  },
};
</script>

<style scoped></style>
